/*
 * @Author: ccccy 459250301@qq.com
 * @Date: 2023-04-09 23:34:49
 * @LastEditors: ccccy 459250301@qq.com
 * @LastEditTime: 2023-04-21 23:42:57
 * @FilePath: \web-frontend-master\src\pages\base\statistics\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import CardChart, { ChartData, ChartType } from "@/components/CardChart";
import { timeSelect } from "@/services/api/billingDetails";
import { waitTime } from "@/utils/request";
import BarChart from "@ant-design/plots/es/components/bar";
import { PageContainer, ProCard, ProFormText, QueryFilter, Search } from "@ant-design/pro-components";
import { Input, Space } from "antd";
import Button from "antd/es/button";
import { number } from "echarts";
import { useCallback, useState } from "react";

 

export default () => {
    const { Search } = Input;
    const [chartType, setChartType] = useState<ChartType>('bar');
    const [dataList, setDataList] = useState<ChartData[]>([]);
    
    
    const OnSearch = async (values:String) => {
        let year:number = 2023;
        if (!isNaN(Number(values))){
            year = values  as number;
        }
        // let year = values  as number;
        // console.log(values,"values")
        console.log(year,"year");
        const date = timeSelect({year });
        const list: ChartData[] = [];
        for (var i = 0; i < 12; i++) {
            list.push({ name: `${i+1}月`, value: 0 });
        }
        (await date).list?.forEach((item) => {
            const m = parseInt(item.consumptionTime!) - 1;
            list[m].value = item.consumption;
        })
        setDataList(list);
    }

    return (
        <PageContainer>
            <Space direction="vertical">
                <Search
                    placeholder="输入年份"
                    allowClear
                    enterButton="查询"
                    size="large"
                    onSearch={OnSearch}
                />
            </Space>
            <ProCard
                title =  "年份统计"
                extra={[
                    <Button onClick={() => setChartType('line')}>折线图</Button>,
                    <Button onClick={() => setChartType('bar')}>直方图</Button>,
                    <Button onClick={() => setChartType('pie')}>饼图</Button>,
                ]}
            >

                <CardChart id="mycharts1" chartType={chartType} data={dataList} height={500} />
            </ProCard>
        </PageContainer>
    )
};

